<template>
	<div id="invate">
		<div class="bg" style=""></div>
		<van-nav-bar title="我的邀请" fixed style="z-index:1000">
			<van-icon name="arrow-left" slot="left" color="black" @click="$router.go(-1)"/>
		</van-nav-bar>
	    <div id="container" style="z-index:999;margin-top:40px">
	    	<van-tabs v-model="active" sticky :offset-top="40" >
			  <van-tab title="I 级合伙人">
			  	<van-collapse v-model="activeNames" >
			  		<van-list v-model="loading">
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
					    <van-collapse-item name="1" class="item">
						    <div slot="icon" class="icon">
						    	<img src="/static/img/good.png" alt="" >
						    </div>
						    <div slot="title" class="title" >
						    	<div class="left_title">
						    		<p class="name" ><span>小白菜</span><span>（团长）</span></p>
						    		<p class="wx"><span style="display:block;float:left">微信号:</span><span>19932423d</span></p>
						    	</div>
						    	<div class="right_title">
						    		<p class="in">邀请总人数 0 人</p>
						    	</div>
						    </div>
						    <div class="container">
						    	<van-row type="flex" justify="center" class="people">
								  <van-col span="8">
								  	<div class="box">
								  		<p>当月邀请人数</p>
								  		<span>0</span>
								  	</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box" style="border-left:1px solid #ededed;border-right:1px solid #ededed">
									  	<p>今日邀请人数</p>
									  	<span>0</span>
									</div>
								  </van-col>
								  <van-col span="8">
								  	<div class="box">
									  	<p>下单人数</p>
									  	<span>0</span>
									 </div>
								  </van-col>
								</van-row>
								<van-row type="flex" justify="center" class="reward">
								  <van-col span="12">
								  	<div class="box" style="border-right:1px solid #ededed">
								  		<p>已奖励<span >0</span></p>
								  	</div>
								  </van-col>
								  <van-col span="12">
								  	<div class="box">
								  		<p>未奖励<span >0</span></p>
								  	</div>
								  </van-col>
								</van-row>
						    </div>
					    </van-collapse-item>
				    </van-list>
				</van-collapse>

			  </van-tab>
			  <van-tab title="II 级合伙人">
			  	内容2
			  </van-tab>
			</van-tabs>
	    </div>

	    
	</div>
</template>

<script>
    export default {
        name: "invate",
        data() {
        	return {
        		active: 'true',
        		activeNames: ['1'],
        		loading: true,
        	}
        },
        methods: {
        	showInfo(activeNames){
        		console.log(activeNames);
        	}
        }
    }
</script>

<style scoped >
	
	#invate{
		font-size: 1rem;
		color: #000000;
		font-family: PingFang-SC-Regular;
		width: 100%;
		height: 100%;
		background-color: #ededed;
	}

	p{
		margin: 0px;
	}
	.icon img{
		width:2rem;
		height:2rem; 
		border-radius:2rem;
	}

	.title{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		height:100%;
		width: 100%;
	}

	.title .left_title{
		display: flex;
		flex-direction:column;
		justify-content:center;
		text-align: left;
	}
	.title .right_title{
		display: flex;
		flex-direction:column;
		justify-content:center;
		margin-top: -15px;
		color: #ff681f;
	}
	.title p{
		margin: 0px;
	}
	.title>div{
		margin-left: 1rem;
	}

	.title .name{
		margin-top:-8px;
	}

	.title .wx{

	}

	.title .in{
		float: right;
	}
	
	.right_icon{
		display: flex;
		flex-direction:column;
		justify-content:center;
		margin-left: 5px;
	}
	.container{
		color: #999999;
	}
	#container .item{
		margin-top: 0.4rem;
	}
	.container .people .box{
		padding:0 0rem; 
	}
	.container .reward{
		margin-top: 0.5rem;
		border-top: 1px solid #ededed;
		padding-top: 0.5rem;
	}
	.container .reward .box{
		padding:0rem 0rem; 
	}

	.container span{
		display: inline-block;
		padding: 0.3rem;
	}
	
</style>